<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>登录</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="stylesheet" type="text/css" href="/statics/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/statics/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/statics/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/statics/css/style.min.css">
    <link rel="stylesheet" type="text/css" href="/statics/plugins/imgver/imgver.min.css" rel="stylesheet">
    <style>
        .login-box {
            background-color: rgba(255, 255, 255, .25);
        }
        .login-box p:last-child {
            margin-bottom: 0px;
        }
        .login-form .form-control {
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
        }
        .login-form .has-feedback {
            position: relative;
        }
        .login-form .has-feedback .form-control {
            padding-left: 36px;
        }
        .login-form .has-feedback .mdi {
            position: absolute;
            top: 0;
            left: 0;
            right: auto;
            width: 36px;
            height: 36px;
            line-height: 36px;
            z-index: 4;
            color: #dcdcdc;
            display: block;
            text-align: center;
            pointer-events: none;
        }
        .login-form .has-feedback.row .mdi {
            left: 15px;
        }
        .login-form .form-control::-webkit-input-placeholder{
            color: rgba(255, 255, 255, .8);
        }
        .login-form .form-control:-moz-placeholder{
            color: rgba(255, 255, 255, .8);
        }
        .login-form .form-control::-moz-placeholder{
            color: rgba(255, 255, 255, .8);
        }
        .login-form .form-control:-ms-input-placeholder{
            color: rgba(255, 255, 255, .8);
        }
        .login-form .custom-control-label::before {
            background: rgba(0, 0, 0, 0.3);
            border-color: rgba(0, 0, 0, 0.1);
        }
        .help-block{
            color: red;!important;
        }
    </style>
</head>

<body class="center-vh" style="background-image: url(/statics/images/login_bg.jpg); background-size: cover;">

<div class="login-box p-5 w-420 mb-0 mr-2 ml-2">
    <div class="text-center mb-3">
        <h3 style="color: #FFFFFF;">智能投喂-管理端</h3>
<!--        <a href="change_info.html"> <img alt="light year admin" src="images/logo-sidebar.png"> </a>-->
    </div>
    <form action="" id="loginForm" method="post" class="login-form">
        <div class="form-group has-feedback mx_validator" >
            <span class="mdi mdi-account" aria-hidden="true"></span>
            <input type="hidden" class="form-control" id="verCode" name="verCode" value="">
            <input type="text" class="form-control mx_validator mx_required" mx_required_msg="用户名不能为空" id="userName" name="userName" placeholder="用户名">
        </div>

        <div class="form-group has-feedback mx_validator">
            <span class="mdi mdi-lock" aria-hidden="true"></span>
            <input type="password" class="form-control mx_required"  mx_required_msg="密码不能为空" id="password" name="password" placeholder="密码">
        </div>

        <div class="form-group has-feedback">
            <div id="imgVer" style="display:inline-block;"></div>
        </div>

        <div class="form-group">
            <div class="custom-control custom-checkbox">
                <input type="checkbox"  class="custom-control-input" id="jizhu">
                <label class="custom-control-label not-user-select text-white" for="jizhu">记住用户名,密码</label>
            </div>
        </div>

        <div class="form-group">
            <button class="btn btn-block btn-primary mx_validator_button" id="loginSubmit" type="button">立即登录</button>
        </div>
    </form>
    <p class="text-center text-white">Copyright © 2022 <a target="_blank" href="#">智渔科技</a>. All right reserved</p>
</div>
<script type="text/javascript" src="/statics/js/jquery.min.js"></script>
<script type="text/javascript" src="/statics/js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="/statics/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/statics/plugins/imgver/jquery.img.ver.min.js"></script>
<script type="text/javascript" src="/statics/js/custom/form.js"></script>
<script type="text/javascript" src="/statics/js/custom/md5.js"></script>
<script type="text/javascript" src="/statics/plugins/layer/layer.min.js"></script>
<script type="text/javascript" src="/statics/js/custom/MX.js"></script>
<script type="text/javascript" src="/statics/js/custom/validator.js"></script>
<script type="text/javascript" src="/statics/js/custom/store.js"></script>
<script type="text/javascript" src="/statics/js/custom/token.js"></script>
<script type="text/javascript" src="/statics/js/apis/base.js"></script>
<script type="text/javascript" src="/statics/js/apis/admin.js"></script>
<script type="text/javascript">

    function getQueryVariable (variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return null;
    }

    function hk(){
        //滑块验证
        imgVer({
            el:'$("#imgVer")',
            width:'300',
            height:'100',
            img:[
                '/statics/plugins/imgver/images/img-slide-1.jpg',
                '/statics/plugins/imgver/images/img-slide-2.jpg',
                '/statics/plugins/imgver/images/img-slide-3.jpg',
                '/statics/plugins/imgver/images/img-slide-4.jpg',
                '/statics/plugins/imgver/images/img-slide-5.jpg',
            ],
            success:function () {
                $("#verCode").val("1");
                $("#loginSubmit").attr('disabled', false);
                // 在这里验证验证码
                // 验证码验证成功后执行登录
            },
            error:function () {
                $("#verCode").val("");
                $("#loginSubmit").attr('disabled', true);
            }
        });
    }

    $(function () {

        var logout = getQueryVariable("logout");
        if(logout!==undefined&&logout!==null&&logout==="1"){
            localStorage.removeItem("menu_list");
            Token.remove()
        }
        hk();


        getCookie();
        function setCookie() { //设置cookie
            var userName = $("#userName").val(); //获取用户名信息
            var password = $("#password").val(); //获取用户名信息
            var checked = $("#jizhu:checked")//获取“是否记住密码”复选框
            if (checked && checked.length > 0) { //判断是否选中了“记住密码”复选框
                $.cookie("is_remmber", 1);//调用jquery.cookie.js中的方法设置cookie中的记住密码
                $.cookie("userName", userName);//调用jquery.cookie.js中的方法设置cookie中的用户名
                $.cookie("password", password);//调用jquery.cookie.js中的方法设置cookie中的密码
            } else {
                $.cookie("is_remmber", 0);
                $.cookie("userName", "");
                $.cookie("password", "");
            }
        }

        function getCookie() { //获取cookie
            if($.cookie("is_remmber")==1){
                $("#userName").val( $.cookie("userName"));
                $("#password").val( $.cookie("password"));
                $("#jizhu").attr("checked",true);
            }
        }
        //登录
        $("#loginSubmit").click(function () {
            VALIDATE.validateNoToken($("#loginForm"),null,null,function(canExec){
                if(canExec){
                    var data = FORM.getValues($('#loginForm'));
                    if(!$.trim(data.verCode)){
                        layer.tips('请先验证', "#loginSubmit", {
                            tips: [1, '#f96868'],
                            time: 3000
                        });
                        return false;
                    }
                    var d = {};
                    d.userName = data.userName;
                    d.password = data.password;
                    var loading = layer.load(0, {shade: [0.5, '#000']});  // 0.1透明度的白色背景
                    $.ajax({
                        type: "post",
                        data: d,
                        headers: {"X-Requested-With":"XMLHttpRequest"},
                        url: ADMIN_LOGIN,
                        dataType: "json",
                        success: function (result, status, xhr) {
                            $("#verCode").val("");
                            Token.remove();
                            layer.close(loading);
                            if (result.code === "M0007") {
                                setTimeout(function(){
                                    hk();
                                },1000)
                                $.each(result.data, function (item) {
                                    layer.msg(result.data[item] != null ? result.data[item] : "参数验证失败", {
                                        icon: 'cry',
                                        skin: $(this).data('bg')
                                    });
                                    return false;
                                });
                                $(".mx_validator_button").attr("disabled",false)
                            }else {
                                if(result.code === "00000"){
                                    setCookie();
                                    Token.set(result.data.tokenValue)
                                    layer.msg("登录成功", {
                                        icon: "smile",
                                        skin: $(this).data('bg'),
                                        time:1000
                                    });
                                    setTimeout(function(){
                                        window.location.href = "/admin/home.html"
                                    },1000)
                                }else{
                                    layer.msg(result.msg != null ? result.msg : "登录失败", {
                                        icon: 'cry',
                                        skin: $(this).data('bg')
                                    });
                                    $(".mx_validator_button").attr("disabled",false)
                                }
                            }
                        }
                    });
                }
            },null)
        });


    });
</script>
</body>
</html>
